<template>
  <div style="height:calc( 100% - 23px );width:100%;" class="row1 acen">
    <div style="width:10%" @click="getBeforeCatch()">
      <el-tooltip effect="dark" content="上一页" placement="top-start">
        <i style="color:#fff;font-size:30px;cursor:pointer" class="el-icon-arrow-left"></i>
      </el-tooltip>
    </div>
    <div class="row1 thecatchphoto fwrap">
      <el-image
        v-for="(item,idx) in peopleImg"
        :key="idx"
        class="catchphoto"
        :src="item"
      ></el-image>
    </div>
    <!-- <div v-else class="row1 thecatchphoto fwrap">
      <el-image v-for="(item,idx) in urls" :key="idx" class="catchphoto" :src="item"></el-image>
    </div> -->
    <div style="width:10%" @click="getNextCatch()">
      <el-tooltip effect="dark" content="下一页" placement="top-start">
        <i style="color:#fff;font-size:30px;cursor:pointer" class="el-icon-arrow-right"></i>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import user from "@/api/user";
import {getToken} from "@/utils/auth";
export default {
  data() {
    return {
      nebunaToken: "",
      isShow: false,
      peopleImg: [
        require("@/assets/loading1.gif"),
        require("@/assets/loading1.gif"),
        require("@/assets/loading1.gif"),
        require("@/assets/loading1.gif")
      ],
      page: 1,
      limit: 4,
      start_no: 1
    };
  },
  created() {
    let that = this;
    // setTimeout(function(){
    //   that.getCatch(that.page);
    // },500)
    
  },
  mounted() {
    let that = this;
    let token = getToken();
    if (!token) {
      setTimeout(function(){
       that.getCatchPhoto(that.page);
      },1000)
    }
    else{
      this.getCatchPhoto(this.page);
    }
    
    
  },

  methods: {
    //马尔康
    async getCatchPhoto(page) {
     let that = this;
     let para = {
        page:page,
        limit: 4,
      };
      const res = await user.sys_pass_list(para)
      that.peopleImg = res.data.map(function (item) {
            let avatar = that.$store.state.passUrl + "/" + item.pic;
            return avatar;
      });
    },
    //学校
    getCatch(page) {
      let that = this;
      let aa = new Date();
      let date =
        "" +
        aa.getFullYear() +
        (aa.getMonth() + 1).toString().padStart(2, "0") +
        aa
          .getDate()
          .toString()
          .padStart(2, "0");
      
      this.axios
        .post(`${that.$store.state.http3}/main/business/pass/list`, {
          page: page,
          limit: 4,
          day: date,
        })
        .then(res => {
          that.peopleImg = res.data.data.map(function(item) {
            let avatar = that.$store.state.passUrl  + item.pic;
            return avatar;
          });
        });
    },
    getBeforeCatch() {
      let that = this;
      if (that.page > 1) {
        that.page--;
        //  this.getCatch(this.page);
        this.getCatchPhoto(this.page);
      } else {
        alert("已经是第一页了");
      }
    },
    getNextCatch() {
      this.page++;
      this.getCatchPhoto(this.page);
      // this.getCatch(this.page);
    },
    getNebunaLogin() {
      let that = this;
      return new Promise((resolve, rej) => {
        that.axios
          .post(`${that.$store.state.nubula}/api/json`, {
            msg_id: "257",
            user_name: "admin",
            user_pwd: "admin"
          })
          .then(res => {
            that.nebunaToken = res.data.data;
            resolve(res);
          })
          .catch(err => {
            rej(err);
          });
      });
    },
    format(time, format) {
      var t = new Date(time);
      var tf = function(i) {
        return (i < 10 ? "0" : "") + i;
      };
      return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a) {
        switch (a) {
          case "yyyy":
            return tf(t.getFullYear());
          case "MM":
            return tf(t.getMonth() + 1);
          case "mm":
            return tf(t.getMinutes());
          case "dd":
            return tf(t.getDate());
          case "HH":
            return tf(t.getHours());
          case "ss":
            return tf(t.getSeconds());
        }
      });
    },
    getNebunaPhoto() {
      let that = this;
      that.isShow = false;
      let time = new Date().getTime();
      window.console.log(time);
      let start = this.format(
        time - 24 * 60 * 60 * 1000,
        "yyyy-MM-dd HH:mm:ss"
      );
      alert(start);
      let stop = this.format(time, "yyyy-MM-dd HH:mm:ss");
      return new Promise((resolve, rej) => {
        that.axios
          .post(`${that.$nubula}/nubula/getJSON`, {
            msg_id: "1037",
            sessionid: that.nebunaToken,
            qry_len: that.limit,
            start_no: that.start_no,
            start_time: start,
            stop_time: stop
          })
          .then(res => {
            that.urls = res.data.data.record;
            that.isShow = true;
            resolve(res);
          })
          .catch(err => {
            rej(err);
          });
      });
    }
  }
};
</script>